<template>
    <div style="padding: 10px;">

        <div class="contianer broder-shadow">
            <div class="schedule ">
                <div>
                    <h4>&nbsp;&nbsp;<p class="el-icon-s-promotion"></p>&nbsp;围群2.0</h4>
                </div>
                <table class="scheduleTable">

                    <tr>
                        <td>
                            <span>激情:</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>总进度:</span>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <span>前端进度:</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>后端进度:</span>
                        </td>
                    </tr>

                </table>

                <el-progress :text-inside="true" :percentage="90" :stroke-width="20" :color="customColors"
                    class="struggle"></el-progress>
                <el-progress :text-inside="true" :percentage="countSchedule" :stroke-width="20" :color="customColors"
                    class="countSchedule"></el-progress>
                <el-progress :text-inside="true" :percentage="webchedule" :stroke-width="20" :color="customColors"
                    class="webchedule"></el-progress>
                <el-progress :text-inside="true" :percentage="javaSchedule" :stroke-width="20" :color="customColors"
                    class="javaSchedule"></el-progress>
            </div>
        </div>

        <div class="directory broder-shadow" >
            <div class="schedule">
                <div>
                    <h4>&nbsp;&nbsp;<p class="el-icon-s-grid"></p>&nbsp;功能目录
                        <el-switch v-model="expandAll" active-text="展开" style="float: right;top:30px;left:150px"
                            @change="expandAllFun">
                        </el-switch>
                    </h4>
                </div>
                <!-- 
                <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                </el-input> -->

                <div class="tree-container">
                    <el-tree class="tree" :data="data" :props="defaultProps" highlight-current :indent="0"
                        :default-expand-all="expandAll" ref="tree">
                    </el-tree>

                </div>

            </div>
        </div>

        <div class="logoDes broder-shadow" style="height: 500px;background-color:rgb(234, 235, 239)">
            <div class="schedule">
                <div>
                    <h4>&nbsp;&nbsp;<p class="el-icon-video-camera-solid"></p>&nbsp;版本更新</h4>
                </div>
                <div class="block">
                    <div class="radio">
                        <el-radio-group v-model="reverse">
                            <el-radio :label="true">倒序</el-radio>
                            <el-radio :label="false">正序</el-radio>
                        </el-radio-group>
                    </div>

                    <div class="activities">
                        <el-timeline :reverse="reverse" >
                            <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color"
                                :timestamp="activity.timestamp">
                                {{ activity.content }}
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="logoDes broder-shadow" style="height: 500px;">
            <div class="schedule">
                <div>
                    <h4>&nbsp;&nbsp;<p class="el-icon-s-opportunity"></p>&nbsp;logo设计</h4>
                </div>

                <div style="width: 800px;margin-top:50px;margin-left:30px">
                    <el-image src="http://oos.wqun.top/img/covar/Snipaste_2023-09-14_18-52-06.jpg"></el-image>
                </div>
            </div>
        </div>


        <div class="logoDes broder-shadow" style="height: 250px;">
            <div class="schedule">
                <div>
                    <h4>&nbsp;&nbsp;<p class="el-icon-phone"></p>&nbsp;联系我们</h4>
                </div>
                <table class="scheduleTable">
                    <tr>
                        <td><span>qq群:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;894435312 </span></td>
                    </tr>
                    <tr>
                        <td><span>微信群:&nbsp;&nbsp;&nbsp;&nbsp;二维码在QQ群公告</span></td>
                    </tr>
                    <tr>
                        <td><span>邮箱:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2984054868@qq.com</span></td>
                    </tr>
                </table>

            </div>
        </div>

        <div class="logoDes broder-shadow" style="height: 230px;">
            <div class="schedule">
                <div>
                    <h4>&nbsp;&nbsp;<p class="el-icon-warning"></p>&nbsp;版权说明</h4>
                </div>
                <table class="scheduleTable">
                    <tr>
                        <td><span>本博客网站为个人学习以及学术交流所制作，java功能，数据库设计，围群logo皆为个人设计，
                                页面样式来自elementui组件库,部分图标来自阿里巴巴矢量图标库，若有侵权，请联系删除！</span></td>
                    </tr>
                    <tr>
                        <td>
                            <P></P>
                        </td>
                    </tr>
                </table>

            </div>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            reverse: true,
            activities: [{
                content: '前后端框架搭建，后端登录注册模块基本完成',
                timestamp: '2023-08-02',
                color: '#0bbd87'
            }, {
                content: '博客表，评论表，文章富文本引入',
                timestamp: '2023-08-03',
                color: '#0bbd87'
            }, {
                content: '首页，用户管理，项目管理，关于围群页面添加',
                timestamp: '2023-08-07',
                color: '#0bbd87'
            }, {
                content: '登录系统，账号密码登录对接完成',
                timestamp: '2023-08-21',
                color: '#0bbd87'
            }, {
                content: '添加文章，文章预览',
                timestamp: '2023-08-26',
                color: '#0bbd87'
            }, {
                content: '首页echars引入静态数据',
                timestamp: '2023-08-26',
                color: '#0bbd87'
            }, {
                content: '主页面动作效果以及文章页面ui设计完善',
                timestamp: '2023-08-28',
                color: '#0bbd87'
            }, {
                content: '文章发表，文章查看，oos上传删除',
                timestamp: '2023-09-02',
                color: '#0bbd87'
            }, {
                content: '用户信息修改，头像修改',
                timestamp: '2023-09-12',
                color: '#0bbd87'
            }, {
                content: '文章评论功能完善，新增回复功能',
                timestamp: '2023-09-14',
                color: '#0bbd87'
            }, {
                content: '用户管理分页查询，列表ui优化,间隔显示不用颜色，鼠标悬停不同颜色',
                timestamp: '2023-09-16',
                color: '#0bbd87'
            }, {
                content: '用户社区ui完善，文字发送，图片发送',
                timestamp: '2023-09-18',
                color: '#0bbd87'
            }, {
                content: '用户社区管理，增加管理者用户列表，用户禁言，文件发送',
                timestamp: '2023-09-20',
                color: '#0bbd87'
            }, {
                content: '社区性能优化，增加用户设置，采用token在用户浏览器保留部分群聊信息',
                timestamp: '2023-09-22',
                color: '#0bbd87'
            }, {
                content: 'echars数据对接，围群10年数据统计',
                timestamp: '2023-09-25',
                color: '#0bbd87'
            }, {
                content: '整体优化，页面微调，将左菜单栏调成顶菜单栏，围群1.0版本完成',
                timestamp: '2023-09-26',
                color: 'red'
            }, {
                content: '安全框架引入，仅仅对接了登录接口',
                timestamp: '2023-09-27',
                color: '#0bbd87'
            }, {
                content: '安全框架，用户接口对接完成',
                timestamp: '2023-09-30',
                color: '#0bbd87'
            }, {
                content: '邮箱功能引入，绑定邮箱，修改密码，找回密码',
                timestamp: '2023-10-01',
                color: '#0bbd87'
            }, {
                content: '用户部分对接完成',
                timestamp: '2023-10-02',
                color: '#0bbd87'
            }, {
                content: '管理员部分对接完成，区别管理员端以及用户端',
                timestamp: '2023-10-03',
                color: '#0bbd87'
            }, {
                content: '下一步计划，权限功能增强',
                color: 'rgb(234, 177, 91)'
            }, {
                content: '管理员端角色管理，权限管理',
                timestamp: '2023-10-03',
                color: 'rgb(234, 177, 91)'
            }, {
                content: 'vue路由路径，菜单，功能由后端提供',
                timestamp: '2023-10-03',
                color: 'rgb(234, 177, 91)'
            }],
            imgtable: [
                "http://oos.wqun.top/img/covar/Snipaste_2023-09-14_18-52-06.jpg",
                "http://oos.wqun.top/img/covar/Snipaste_2023-09-14_18-52-06.jpg",
                "http://oos.wqun.top/img/covar/Snipaste_2023-09-14_18-52-06.jpg",
            ],
            data: [{

                label: '围群系统功能',
                children: [{
                    label: '欢迎页',
                    children: [{
                        label: '登录',
                        children: [{
                            label: '图形验证码拉框',
                        }]
                    }, {
                        label: '密码找回',
                    }, {
                        label: '注册'
                    }]
                }, {
                    label: '右上角用户信息',
                    children: [{
                        label: '基本信息',
                        children: [{
                            label: '用户信息展示',
                        }, {
                            label: '用户信息修改',
                        }, {
                            label: '点赞数据',
                        }, {
                            label: '收藏数据',
                        }, {
                            label: '最近浏览',
                        }]
                    }, {
                        label: '修改密码',
                    }, {
                        label: '退出登录',
                    }]
                }, {
                    label: '首页',
                    children: [{
                        label: '围群统计(文章，笔记，项目，源码，总人数，7日内新增人数)'
                    }, {
                        label: '围群数据统计（访客，7日内新增人数，文章数，评论，项目）'
                    }, {
                        label: '给读者的一封信'
                    }]
                },
                {
                    label: '文章管理',
                    children: [{
                        label: '添加文章'
                    }, {
                        label: '文章浏览'
                    }, {
                        label: '文章点赞，收藏，评论'
                    }]
                },
                {
                    label: '关于围群',
                    children: [{
                        label: '系统进度'
                    }, {
                        label: '功能目录'
                    }
                    ]
                }]
            }, {
                label: '技术栈',
                children: [{
                    label: '后端',
                    children: [{
                        label: '分布式服务'
                    }, {
                        label: 'springboot'
                    }, {
                    }, {
                        label: 'springsecurity'
                    }, {
                        label: 'mysql'
                    }, {
                        label: 'maven'
                    }, {
                        label: 'mybitsPlus'
                    }, {
                        label: 'JDBC'
                    }, {
                        label: 'email'
                    }, {
                    }, {
                        label: '阿里云sms'
                    }, {
                        label: '阿里云oos'
                    }, {
                        label: 'redis'
                    }, {
                        label: 'MD5加密'
                    }, {
                        label: 'swagger'
                    }, {
                        label: 'io流'
                    }, {
                        label: 'nacoe'
                    }]
                }, {
                    label: '前端',
                    children: [{
                        label: 'vue'
                    }, {
                        label: 'elementui'
                    }, {
                        label: 'eChars'
                    }, {
                        label: 'html'
                    }, {
                        label: 'cas'
                    }, {
                        label: 'axios'
                    }, {
                        label: 'router'
                    }, {
                        label: 'vue-editor富文本'
                    }, {
                        label: 'vue-puzzle-vcode图形验证'
                    }, {
                        label: 'vue-cropper图片裁剪'
                    }, {
                        label: 'upload文件上传'
                    }]
                }, {
                    label: '设计',
                    children: [
                        {
                            label: 'adobe图形设计'
                        }, {
                            label: 'Photoshop图形优化'
                        }
                    ]
                }]
            }, {
                label: '框架环境',
                children: [{
                    label: 'springboot',
                    children: [{
                        label: 'idea:2022'
                    }, {
                        label: 'jdk:11'
                    }, {
                        label: 'redis:64.3.0.503'
                    },]
                }, {
                    label: 'vue2.0',
                    children: [{
                        label: 'elementui:2.15.14'
                    }]
                }, {
                    label: 'mybits8.0'
                }]
            }],
            expandAll: false,
            filterText: '',
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            countSchedule: 20,
            webchedule: 80,
            javaSchedule: 60,
            customColor: '#409eff',
            customColors: [
                { color: '#f56c6c', percentage: 20 },
                { color: '#e6a23c', percentage: 40 },
                { color: '#5cb87a', percentage: 60 },
                { color: '#6f7ad3', percentage: 80 },
                { color: '#1989fa', percentage: 100 }
            ]

        };
    },
    created() {
        this.getCountSchedule();
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        expandAllFun() {
            this.expandNodes(this.$refs.tree.store.root);
        },
        // 遍历树形数据，设置每一项的expanded属性，实现展开收起
        expandNodes(node) {
            node.expanded = this.expandAll;
            for (let i = 0; i < node.childNodes.length; i++) {
                node.childNodes[i].expanded = !this.expandAll;
                if (node.childNodes[i].childNodes.length > 0) {
                    this.expandNodes(node.childNodes[i]);
                }
            }
        },
        handleNodeClick(data) {
            console.log(data);
        },
        getCountSchedule() {
            this.countSchedule = (this.webchedule + this.javaSchedule) / 2;
        },
        customColorMethod(percentage) {
            if (percentage < 30) {
                return '#909399';
            } else if (percentage < 70) {
                return '#e6a23c';
            } else {
                return '#67c23a';
            }
        },
        increase() {
            this.percentage += 10;
            if (this.percentage > 100) {
                this.percentage = 100;
            }
        },
        decrease() {
            this.percentage -= 10;
            if (this.percentage < 0) {
                this.percentage = 0;
            }
        }
    }
}
</script>




<style lang="less" scoped> // 设置高亮颜色

 /deep/ .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
     background-color: rgb(210, 201, 246) !important;
     width: 100%;
 }
</style>


<style scoped>
.activities{
    height: 250px;
    overflow-y: scroll;
}
.radio {
    margin-left: 280px;
    margin-bottom: 30px;
}

.block {
    margin-top: 30px;
    margin-left: 70px;
    box-shadow:
    inset -7px -7px 10px rgba(255, 255, 255, .9),
    inset 7px 7px 10px rgba(0, 0, 0, .4);
    padding: 35px;
    width: 710px;
    height: 300px;
    border-radius: 20px;

}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}



.tree-container {
    width: 500px;
    margin-left: 100px;
    overflow-y: hidden;

}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.el-tree-node.is-current>.el-tree-node__content {
    background-color: #f1f4f5;
}

.classTitle {
    padding-left: 10px;
    width: 100%;
    height: 62px;
    background-color: #fafafa;
    line-height: 42px;
    font-weight: bold;
}

.el-form .el-form-item {
    margin: 0px 0 !important;
}

.tree-menu {
    width: 200px;
    height: 300px;
    overflow: auto;
}

.tree {
    display: inline-block;
    min-width: 100%;
}

.tree /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
}

.tree /deep/ .el-tree-node__children {
    padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
    height: 38px;
}

.tree /deep/ .el-tree>.el-tree-node:before {
    border-left: none;
}

.tree-container /deep/ .el-tree>.el-tree-node:after {
    border-top: none;
}

.tree /deep/ .el-tree-node:before {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
}

.tree /deep/ .el-tree-node__expand-icon.is-leaf {
    display: none;
}

.tree /deep/ .el-tree-node:before {
    border-left: 1px dashed #b8b9bb;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
}

.tree /deep/ .el-tree-node:after {
    border-top: 1px dashed #b8b9bb;
    height: 20px;
    top: 12px;
    width: 24px;
}

.tree /deep/ .el-tree-node__content {
    padding-left: 0 !important;
}

.el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.el-tree .el-icon-caret-right:before {
    /* background: url("../../../../assets/img/plus.png") no-repeat 0; */
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}

.el-tree .el-tree-node__expand-icon.expanded .el-icon-caret-right:before {
    /* background: url("../../../../assets/img/minus.png") no-repeat 0 ; */
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
}

.broder-shadow {
    border: solid 1px #d6d5d5;
    box-shadow: 1px 1px 3px #a2a1a1
}

.main {
    width: 100%;
}

.struggle {
    position: absolute;
    width: 500px;
    left: 30%;
    top: 74px;
}

.countSchedule {
    position: absolute;
    width: 500px;
    left: 30%;
    top: 110px;
}

.webchedule {
    position: absolute;
    width: 500px;
    left: 30%;
    top: 142px;
}

.javaSchedule {
    position: absolute;
    width: 500px;
    left: 30%;
    top: 175px;
}


.schedule {
    margin-top: -15px;
    position: relative;
}

.scheduleTable {
    position: absolute;
    top: 67px;
    height: 135px;
    margin-left: 100px;
}

.schedule td :nth-child(1) {}

.contianer {

    width: 900px;
    border-radius: 10px;
    margin: 0 auto;
    height: 250px;
    margin-top: 30px;

}

.logoDes {

    width: 900px;
    border-radius: 10px;
    margin: 0 auto;
    height: 350px;
    margin-top: 30px;

}

.directory {

    width: 900px;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 30px;
    padding-bottom: 30px;

}

.schedule {
    width: 700px;
}
</style>